$(function () {
    // 参数为全局对象
    let q = {
        pagenum: 1,        //是	int	页码值
        pagesize: 2,        //是	int	每页显示多少条数据
        cate_id: "",       //否	string	文章分类的 Id
        state: "",       //否	string	文章的状态，可选值有：已发布、草稿
    }
    let layer = layui.layer

    // 需求1. 初始化文章列表- 封装函数,将来复用
    initArticleList()
    function initArticleList() {
        axios({
            url: '/my/article/list',
            // GET类型用parems属性,POST 类型用data属性
            params: q
        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a href="">
                            <button data-id="${ele.Id}" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            });
            // 赋值
            $("tbody").empty().html(arr.join(''))
            // 分页
            renderpage(res.data.total)

        })
    }

    // 需求2. 渲染筛选中的文章分类列表
    let form = layui.form
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            // 成功,渲染
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            });
            let str = arr.join('')
            $("[name=cate_id]").empty().html(str)
            // form.render() 可以渲染layui中的 select/checkbox/radio 
            form.render()
        })
    }

    // 需求3. 筛选
    $("#searchForm").on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $("[name=cate_id]").val()
        q.state = $("[name=state]").val()
        initArticleList() // 重新渲染
    })

    // 需求4. 分页
    function renderpage(total) {
        let laypage = layui.laypage;
        layui.use('laypage', function () {
            //执行一个laypage实例
            laypage.render({
                elem: 'pageBox',  //注意，这里的 test1 是 ID，不用加 # 号
                count: total, //数据总数，从服务端得到
                limit: q.pagesize,  // 每页显示多少条
                curr: q.pagenum,  // 第几页
                // 显示区域
                layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
                limits: [2, 3, 5, 10, 50],
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    // console.log(obj.limit); //得到每页显示的条数

                    //首次不执行
                    if (!first) {
                        //do something
                        q.pagenum = obj.curr
                        q.pagesize = obj.limit
                        initArticleList()
                    }
                }
            });
        });

    }

    // 需求5. 删除功能
    $("tbody").on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        //eg1
        layer.confirm('是否确定删除?', { icon: 3, title: '提示' }, function (index) {
            // 删除的axios
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                // console.log(res);
                if (res.data.status !== 0) {
                    return layer.msg(res.data.massage)
                }
                // 成功
                layer.msg('恭喜您,删除文章成功!')
                $(".del-btn").length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })
            layer.close(index);
        });
    })




})